<template>
  <div class="home">
      <van-tabbar v-model="active" class="tab-bar" active-color="#ee0a24" inactive-color="#000" @change="showActive">
        <van-tabbar-item icon="service">讲解</van-tabbar-item>
        <van-tabbar-item>
          <span>美食</span>
          <template #icon="props">
            <img :src="props.active ? food.active : food  .inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>住宿</span>
          <template #icon="props">
            <img :src="props.active ? hotel.active : hotel.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="shop">商店</van-tabbar-item>
        <van-tabbar-item>
            <span>卫生间</span>
            <template #icon="props">
              <img :src="props.active ? toilet.active : toilet.inactive" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">
          <span>停车场</span>
          <template #icon="props">
            <img :src="props.active ? parking.active : parking.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    <div class="map">
      <router-view/>
    </div>
  </div>
</template>

<script>
// @ is  an alias to /src

export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      hotel: {
        active: 'https://yeguo7.xyz/map/hotel.png',
        inactive: 'https://yeguo7.xyz/map/no_hotel.png'
      },
      food: {
        active: 'https://yeguo7.xyz/map/food.png',
        inactive: 'https://yeguo7.xyz/map/no_food.png'
      },
      toilet: {
        active: 'https://yeguo7.xyz/map/toilet.png',
        inactive: 'https://yeguo7.xyz/map/no_toilet.png'
      },
      parking: {
        active: 'https://yeguo7.xyz/map/parking.png',
        inactive: 'https://yeguo7.xyz/map/no_parking.png'
      }
    }
  },
  methods: {
    showActive: function () {
      console.log(this.active)

      if (this.active === 0) {
        this.$router.push('/place')
      } else if (this.active === 1) {
        this.$router.push('/food')
      } else if (this.active === 2) {
        window.location.href('https://minsu.dianping.com/')
      }
    }
  },
  created () {
    this.$router.push('/place')
  }
}
</script>

<style scoped>
  /*.home {*/
  /*  position: relative;*/
  /*  top: 0px;*/
  /*}*/
  .tab-bar {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
  }
  .map {
    height: 100vh;
  }
</style>
